New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

@tiptap/extension-floating-menu

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@tiptap/extension-floating-menu

floating-menu extension for tiptap


Version published
Weekly downloads
1.4M
increased by3.23%
Maintainers
6
Weekly downloads
 
Created

What is @tiptap/extension-floating-menu?

@tiptap/extension-floating-menu is an extension for the Tiptap editor that provides a floating menu interface. This menu appears when the user selects text or performs certain actions, offering a convenient way to access formatting options and other editor functionalities.

What are @tiptap/extension-floating-menu's main functionalities?

Floating Menu Initialization

This code initializes the floating menu with a specified HTML element and configuration options for its placement using Tippy.js.

const floatingMenu = FloatingMenu.configure({
  element: document.querySelector('.floating-menu'),
  tippyOptions: {
    placement: 'right',
  },
});

Custom Menu Items

This code configures the floating menu to include custom menu items such as 'Bold' and 'Italic', which execute corresponding commands when selected.

const floatingMenu = FloatingMenu.configure({
  element: document.querySelector('.floating-menu'),
  items: [
    { command: 'bold', label: 'Bold' },
    { command: 'italic', label: 'Italic' },
  ],
});

Conditional Display

This code sets up the floating menu to only display when there is a text selection, using a conditional function to determine its visibility.

const floatingMenu = FloatingMenu.configure({
  element: document.querySelector('.floating-menu'),
  shouldShow: ({ state }) => {
    return state.selection.empty === false;
  },
});

Other packages similar to @tiptap/extension-floating-menu

FAQs

Package last updated on 31 Jan 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts